<template>
    <u-popup :show="show" :overlay="true" mode="center" overlayStyle="background-color: rgba(0, 0, 0, 0.8);"
        :closeable="false" round="30rpx" :safeAreaInsetBottom="false" @close="handleClose">
        <view class="common-dialog">
            <!-- 顶部图标区域 -->
            <view v-if="icon" class="dialog-icon">
                <u-image :src="icon" mode="aspectFit" width="112rpx" height="110rpx" />
            </view>

            <!-- 标题区域 -->
            <view v-if="title" class="dialog-title" :style="titleStyle">
                {{ title }}
            </view>

            <!-- 内容区域 -->
            <view class="dialog-content" :style="contentStyle">
                <slot>
                    <text class="content-text">{{ content }}</text>
                </slot>
            </view>

            <!-- 按钮区域 -->
            <view class="dialog-footer" :class="{ 'single-btn': !showCancel }">
                <u-button v-if="showCancel" class="cancel-btn" :style="cancelStyle" @click="handleCancel" plain
                    shape="circle" text="取消">
                    {{ cancelText }}
                </u-button>
                <u-button class="confirm-btn" :style="confirmStyle" @click="handleConfirm" type="primary"
                    shape="circle">
                    {{ confirmText }}
                </u-button>
            </view>
        </view>
    </u-popup>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
    // 控制弹窗显示
    show: {
        type: Boolean,
        default: false
    },
    // 标题
    title: {
        type: String,
        default: ''
    },
    // 内容
    content: {
        type: String,
        default: ''
    },
    // 顶部图标
    icon: {
        type: String,
        default: ''
    },
    // 确认按钮文字
    confirmText: {
        type: String,
        default: '确定'
    },
    // 取消按钮文字
    cancelText: {
        type: String,
        default: '取消'
    },
    // 是否显示取消按钮
    showCancel: {
        type: Boolean,
        default: true
    },
    // 标题样式
    titleStyle: {
        type: Object,
        default: () => ({})
    },
    // 内容样式
    contentStyle: {
        type: Object,
        default: () => ({})
    },
    // 确认按钮样式
    confirmStyle: {
        type: Object,
        default: () => ({})
    },
    // 取消按钮样式
    cancelStyle: {
        type: Object,
        default: () => ({})
    }
})

const emit = defineEmits(['update:show', 'confirm', 'cancel', 'close'])

const handleClose = () => {
    emit('update:show', false)
    emit('close')
}

const handleConfirm = () => {
    emit('confirm')
    handleClose()
}

const handleCancel = () => {
    emit('cancel')
    handleClose()
}
</script>

<script>
export default {
    options: { styleIsolation: "shared" },
};
</script>

<style lang="scss" scoped>
.common-dialog {
    width: 560rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 40rpx 30rpx;
    box-sizing: border-box;

    .dialog-icon {
        display: flex;
        text-align: center;
        margin-bottom: 20rpx;
        justify-content: center;
    }

    .dialog-title {
        font-size: 40rpx;
        font-weight: bold;
        color: #052758;
        text-align: center;
        margin-bottom: 20rpx;
        line-height: 1.5;
        word-wrap: break-word;

        .content-text {
            white-space: pre-wrap; // 保留换行符并自动换行
            word-wrap: break-word; // 确保长单词也能换行
            word-break: break-all; // 防止文本溢出
        }
    }

    .dialog-content {
        font-size: 30rpx;
        color: #666;
        text-align: center;
        margin-bottom: 40rpx;
        line-height: 1.5;
        word-wrap: break-word;
    }

    .dialog-footer {
        display: flex;
        justify-content: space-between;
        gap: 20rpx;

        &.single-btn {
            justify-content: center;
        }

        :deep(.u-button) {
            margin: 0;
            width: 224rpx;
            height: 88rpx !important;
        }

        .cancel-btn {
            border: 2rpx solid #0061FF;
            color: #0061FF;
            background-color: #FFFFFF;
        }

        .confirm-btn {
            background-color: #0061FF;
            box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(74,127,246,0.29);
        }
    }
}
</style>